import React from "react";
import { Line } from "@ant-design/plots";
import { Icon, Tooltip } from "antd";
import "./style.less";

interface RootObject {
  height?: number;
  color?: string;
  smooth?: boolean;
  xField: string;
  yField: string;
  xAxis?: any;
  yAxis?: any;
  areaStyle?: {
    fill?: string;
  };
}

interface TitleType {
  title: string;
  prompt?: string;
}

type Props = {
  data: Record<string, any>[];
  areaConfig: RootObject;
  title: TitleType[];
  aggregations: string[];
  children?: React.ReactNode;
};

const AreaItem: React.FC<Props> = (props) => {
  const { data, areaConfig, title, aggregations, children } = props;

  const config = {
    data,
    ...areaConfig,
  };

  return (
    <div className="area-chart-item">
      <header className="title">
        <div className="agg-title">
          {title &&
            title.map((item, index) => (
              <Tooltip placement="topLeft" title={item.prompt} key={index}>
                <h1>
                  {item.title}&nbsp;
                  <Icon
                    type="exclamation-circle"
                    style={{ fontSize: "10px", position: "absolute" }}
                  />
                </h1>
              </Tooltip>
            ))}
        </div>
        <div className="agg-item">
          {aggregations &&
            aggregations.map((item, index) => <span key={index}>{item}</span>)}
          {aggregations.length <= 1 && children}
        </div>
      </header>
      <Line {...config} style={{ height: 120 }} />
    </div>
  );
};

export default AreaItem;
